<style scoped>
  .list {
    background: #eee;
    padding-bottom: 90px;
    overflow: auto;
  }
  .weui-form-preview {
    background-color: #fff;
    margin: 5px;
    border-radius: 5px;
  }
  .weui-form-preview__hd label, .weui-form-preview__hd em {
    font-size: .9em !important;
  }
  .paylayer .rj-cell {
    display: inline-block;
    text-align: center;
  }
  .rj-cell {
    /*display: inline-block;*/
    font-size: 0;
    padding: 5px 15px;
    text-align: left;
  }
  .rj-cell.max span{
    font-size: 16px;
    padding-right: 20px;
  }
  .rj-cell label {
    color: #333;
    font-size: 14px;
  }
  .rj-cell span {
    padding-left: 5px;
    font-size: 14px;
    color: #333;
  }
  .weui-cells {
    border-radius: 5px;
    margin-top: 0;
  }
  .paylayer {
    width: 100%;
    text-align: center;
    position: fixed;
    bottom: 0;
    border-top: 1px solid #ddd;
    background: #fff;
    z-index: 100;
  }
  .rj-wrap {
    background: #eee;
    overflow:auto;overflow-x: hidden
  }
  .rj-cont {
    background: #fff;
  }
  .rj-cell span i {
    color: red;
    font-size: 30px;
    font-style: normal;
  }
  .paylayer .rj-cell {
    padding: 5px;
  }
  .weui-panel {
    background: #eee;
  }
  .rj-cont-tit {
    margin: 0;
    border-radius: 0;
  }
  .weui-panel {
    margin-top: 0;
  }
  .all-btn {
    position: absolute;
    right: 8px;
    top: 1px;
  }
  .all-btn i {
    font-size: 16px;
    position: absolute;
    left: -7px;
    top: 8px;
  }
  .weui-cells {
    text-align: left;
  }
</style>
<template>
  <div class="comon">
    <div class="rj-wrap">
      {{title}}
      <a @click="$router.back(-1)" style="position: absolute; left: 10px; top: 8px">
        <img src="@/assets/back.png" style="width: 20px">
      </a>
    </div>
    <div class="weui-panel weui-panel_access">
      <div class="weui-panel__bd">
        <div class="weui-form-preview billitem rj-cont-tit" style="position: relative;">
          <div class="rj-cell max">
            <label>编号：</label>
            <span>{{baseInfo.code}}</span>
          </div>
          <div class="rj-cell max">
            <label>物流公司：</label>
            <span>{{baseInfo.customername}}</span>
          </div>
          <div class="rj-cell max">
            <label>承运人：</label>
            <span>{{baseInfo.drivername}}&nbsp;&nbsp;<em class="rj-edit-em">{{baseInfo.carcode}}</em>&nbsp;&nbsp;{{baseInfo.driverphone}}</span>
          </div>
          <div class="rj-cell max">
            <label>发货地址：</label>
            <span>{{baseInfo.deliprovince + baseInfo.delicity + baseInfo.delidistrict + baseInfo.deliaddress}}</span>
          </div>
          <div class="rj-cell max">
            <label>到货地址：</label>
            <span>{{baseInfo.arriprovince + baseInfo.arricity + baseInfo.arridistrict + baseInfo.arriaddres}}</span>
          </div>
          <div class="rj-cell max">
            <label>结算方式：</label>
            <span>{{baseInfo.faretypeName}}</span>
          </div>
          <div class="rj-cell max">
            <label>运价方式：</label>
            <span>{{baseInfo.farepricetypename}}</span>
          </div>
          <div class="rj-cell max">
            <label>运价：</label>
            <span>{{baseInfo.fareprice}}</span>
          </div>
          <div class="rj-cell max">
            <label>备注：</label>
            <span>{{baseInfo.remark}}</span>
          </div>
          <div class="rj-cell all-btn" style="" id="allSec">
            <i class="weui-icon-circle"></i>
            <label>全选</label>
          </div>
        </div>
      </div>
      <SearchBar @doSearch="doSearch" />
    </div>
    <div class="list" id="list">
      <div class="page-infinite-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }" >
        <mescroll-vue ref="mescroll" id="wrapper" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit">
          <div class="weui-form-preview" v-for="(item, index) in orders" :key="item.guid">
            <div class="weui-cells weui-cells_checkbox">
              <div class="weui-cell">
                <div class="weui-cell__bd weui-cell_primary payitem" data-guid="">
                  <p> </p>
                  <div class="rj-cell max">
                    <label>销售单号：</label>
                    <span>{{item.sellcode}}</span>
                  </div>
                  <div class="rj-cell max">
                    <label>申请人：</label>
                    <span>{{item.operatorname}}</span>
                    <span>{{item.depname}}</span>
                  </div>
                  <div class="rj-cell max">
                    <label>发货工厂：</label>
                    <span>{{item.storeroomname}}</span>
                  </div>
                  <div class="rj-cell max">
                    <label>状态：</label>
                    <span>{{item.statusname}}</span>
                  </div>
                  <div class="rj-cell">
                    <label>备注：</label>
                    <span style="color: #000;">{{item.remarks}}</span>
                  </div>
                  <div class="rj-cell max">
                    <label>创建时间：</label>
                    <span>{{item.createtime}}</span>
                  </div>
                  <p></p>
                </div>
                <label class="weui-check_label weui-cell__ft" :for="'weui-select-id-' + item.guid">
                  <input type="checkbox" class="weui-check" name="weui-select" :value="item.guid" :data-amount="item.finalamount" :data-weight="item.loadweight" :data-guid="item.guid" :id="'weui-select-id-' + item.guid" data-title="" />
                  <span class="weui-icon-checked"></span>
                </label>
              </div>
            </div>
          </div>
        </mescroll-vue>
      </div>
    </div>
    <div class="paylayer">
      <div class="rj-cell">
        <label>合计：</label>
      </div>
      <div class="rj-cell">
        <label></label>
        <span id="carnum"><i>0</i> 单</span>
      </div>
      <div class="rj-cell">
        <label></label>
        <span id="weight"><i>0</i> 吨</span>
      </div>
      <div class="weui-form-preview__ft">
        <a class="weui-form-preview__btn weui-form-preview__btn_primary" @click="send" href="javascript:">确定</a>
        <a class="weui-form-preview__btn weui-form-preview__btn_default" @click="$router.back(-1)">返回</a>
      </div>
    </div>
    <div id="bmlogs">
      <OperationLogs2 :nodeid="nodeid" :orderid="id" :srguid="''" :departid="baseInfo.departid"></OperationLogs2>
    </div>
  </div>
</template>
<script type="text/babel">
  import MescrollVue from 'mescroll.js/mescroll.vue'
  import OperationLogs2 from '../common/OperationLogs2'
  import SearchBar from '../common/SearchBar'

  export default {
    name: 'ShareCar',
    data () {
      return {
        id: '',
        title: '',
        nodeid: '',
        annex: '',
        baseInfo: '',
        orders: [],
        mescroll: null, // mescroll实例对象
        mescrollDown: {},
        mescrollUp: { // 上拉加载的配置.
          callback: this.upCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
          page: {
            num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
            size: 5 //每页数据条数,默认10
          },
          htmlNodata: '<p class="upwarp-nodata">-- 我是有底线的 --</p>',
          noMoreSize: 1,
          empty: {
            warpId: "wrapper", //父布局的id (1.3.5版本支持传入dom元素)
            tip: "暂无相关数据~" //提示
          }
        },
        wrapperHeight: 600,
        totalGuids: '',
        selected : false,
        sellform: {},
        storeroomid: '',
        postParams: {}
      }
    },
    components: {
      MescrollVue,
      OperationLogs2,
      SearchBar
    },
    created() {
    },
    mounted() {
      let that = this;
      this.id = this.$route.query.guid;
      this.nodeid = this.$route.query.nodeid;
      this.annex = this.$route.query.annex;
      this.title = this.$route.query.title;
      this.getBaseInfo();
      //首次加载为未选中状态
      $('#allSec').click(function(){
        var elem = $('input[name="weui-select"]');
        for (var i=0; i< elem.length; i++) {
          if (!elem.eq(i).is(':checked')) {
            that.selected = true;
          }
        }
        if (that.selected) {
          that.switchChecked(false, elem);
        } else {
          that.switchChecked(true, elem);
        }
      })

      //选择运单后计算总支付金额
      $('#list').on("change", "input[name='weui-select']", function(){
        var elem = $('input[name="weui-select"]:checked');
        var len = elem.length;
        var totalAmoumt = 0;
        var totalCarnum = 0;
        var totalWeight = 0;
        that.totalGuids = "";
        for (var i=0; i<len; i++) {
          totalAmoumt += elem.eq(i).data('amount');
          totalWeight += elem.eq(i).data('weight');
          that.totalGuids = that.totalGuids + elem.eq(i).data('guid') + ',';
          console.log(that.totalGuids);
          totalCarnum += 1;
        }
        //联动全选按钮
        if (totalCarnum == $('input[name="weui-select"]').length) {
          if (that.selected) {
            that.switchBtnStyle(true);
          }
        } else {
          if (!that.selected) {
            that.switchBtnStyle(false);
          }
        }

        //$('#amount i').text(that.toDecimal2NoZero(totalAmoumt));
        $('#weight i').text(that.toFix6(totalWeight));
        $('#carnum i').text(totalCarnum);
        that.totalGuids = that.totalGuids.substr(0,that.totalGuids.length-1);
      })
      // $('input[type="checkbox"]').change(function () {
      //   console.log('val:', $(this).val())
      // })
      this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top - 40;
    },
    watch: {
      'storeroomid': function (val) {
        this.getPageData();
      }
    },
    methods: {
      doSearch: function(keywords) {
        this.postParams.sellcode = keywords;
        this.getPageData();
      },
      getBaseInfo: function() {
        this.axios({
          method: 'post',
          url: '/wlinfo/Wlinfo!getUpImagInfo.action',
          async: false,
          params: {wlinfoid: this.id, url: location.href.split("#")[0]}
        }).then(response => {
          if (response.data.msg == 'success') {
            this.baseInfo = response.data.wlinfo;
            this.sellform = response.data.sellform;
            this.storeroomid = response.data.sellform.storermguid;
            //this.upCallback (this.page, this.mescroll);
          } else if (response != undefined && response.data != undefined && response.data.msg == 'sessionTimeOut') {
            //不不设置提示
          } else {
            this.toastError('系统错误');
          }
        });
      },
      mescrollInit (mescroll) {
        this.mescroll = mescroll  // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
      },
      upCallback (page, mescroll) {

        this.postParams.pageNo = page.num;
        this.postParams.pageSize = page.size;
        this.postParams.storeRMguid = this.sellform.storermguid;
        console.log("postParams",this.postParams)
        // postParams.customerid = this.customerid;
        // 联网请求
        this.axios({
          method: 'get',
          url: '/sales/Sellform!liatPageForShareCar.action',
          params: this.postParams,
          async: false
        }).then((response) => {
          if (response.data.code == 1) {
            let res = response.data.msg != undefined ? response.data.msg : {rows: []};
            // 如果是第一页需手动置空列表
            if (page.num === 1) this.orders = []
            // 把请求到的数据添加到列表
            this.orders = this.orders.concat(res.rows);
            // 数据渲染成功后,隐藏下拉刷新的状态
            this.$nextTick(() => {
              mescroll.endSuccess(res.rows.length)
            })
          } else if (response.data.code == 0) {
            this.toastText(response.data.msg);
          } else if (response != undefined && response.data != undefined && response.data.msg == 'sessionTimeOut') {
            //不不设置提示
          } else {
            this.toastError("系统错误");
          }

        }).catch((e) => {
          // 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
          mescroll.endErr()
        })
      },
      getPageData: function () {
        $('#wrapper').scrollTop(0);
        this.orders = [];
        this.mescroll.resetUpScroll();
      },
      switchChecked: function (status, elem) {
        if (status) {
          for (var i=0; i< elem.length; i++) {
            if (elem.eq(i).is(':checked')) {
              elem.eq(i).click();
            }
          }
          this.switchBtnStyle(false);
        } else {
          for (var i=0; i< elem.length; i++) {
            if (!elem.eq(i).is(':checked')) {
              elem.eq(i).click();
            }
          }
          this.switchBtnStyle(true);
        }
      },
      switchBtnStyle: function (status){
        if (status) {
          $('#allSec').find('i').removeClass("weui-icon-circle");
          $('#allSec').find('i').addClass("weui-icon-success");
          this.selected = false;
        } else {
          $('#allSec').find('i').removeClass("weui-icon-success");
          $('#allSec').find('i').addClass("weui-icon-circle");
          this.selected = true;
        }
      },
      send: function () {
        let that = this;
        let selectedOrders = [];
        let selectedguid = "";
        selectedOrders = this.orders.filter(function (item) {
          return that.totalGuids.indexOf(item.guid) > -1;
        });
        //console.log(selectedOrders)
        for(let i = 0; i < selectedOrders.length; i++){
          if(selectedguid == ""){
            selectedguid = selectedOrders[i].guid;
          }else{
            selectedguid = selectedguid + ',' + selectedOrders[i].guid;
          }

        }
        $.ajax({
          url: '/wlinfo/Wlinfo!shareCar.action',
          data: {guid : that.id, sellids : selectedguid},
          type: "post",
          dataType: "json",
          success: function(res) {
            if(res.result){
              that.toastSuccess('拼车成功!');
              that.$router.push({name: 'Wlinfo'});
            }else{
              that.toastError('拼车失败!');
            }
          }
        });
      },
      openLogs: function() {
        this.$router.push({name: 'OperationLogs2', query: {orderid: this.id, srguid: '', departid: ''}});
      }
    }
  };
</script>
